<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Mixed Charts</title>
    <link href="layout.css" rel="stylesheet" type="text/css"></link>
    <!--[if IE]><script language="javascript" type="text/javascript" src="js/excanvas.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="js/jquery-1.2.6.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery.flot.js"></script>
 </head>
    <body>
    <h3>Mixed Charts</h3>

	<div id="placeholder1" style="width:600px;height:300px;"></div>
	<script id="source" language="javascript" type="text/javascript">
		$(function () {
			var date1 = new Date("2001/01/01").getTime();
			var date2 = new Date("2002/01/01").getTime();
			var date3 = new Date("2003/01/01").getTime();
			var date4 = new Date("2004/01/01").getTime();
			var date5 = new Date("2005/01/01").getTime();
			var d1 = {
					label: "d1", 
					data: [[date1, 1], [date2, 2], [date3, 3], [date4, 4], [date5, 5]],
					points: { show: true}
				};
			var d2 = {
					label: "d2", 
					data: [[date1, 1], [date2, 5], [date3, 15], [date4, 20], [date5, 25]],
					lines: { show: true, fill: false }
				};
			var d3 = {
					label: "d3", 
					data: [[date1, 1], [date2, 10], [date3, 20], [date4, 30], [date5, 40]],
					lines: { show: true, fill: false },
					points: { show: true, fill: false }
				};
			var d4 = {
					label: "d4", 
					data: [[date1, 22], [date2, 12], [date3, 17], [date4, 28], [date5, 11]],
					bars: { show: true, fill: true }
				};
			var options = {
				xaxis: { 
					mode: "time", 
					timeformat: "%y/%m", 
					min: date1,
					max: date5
				},
				yaxis: { min: 0, max: 50 },
				legend: { position: 'ne' }
			}
			$.plot($("#placeholder1"), [d1, d2, d3, d4 ], options);
		});
	</script>

 </body>
</html>
